<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery.js"></script>
<style>
     #a{
         display: block;
     }
     #slid_p{
         display: none;
     }
   
</style>
<body>
    <button id="btn1">按钮1</button>
    <button id="btn2"></button>
    <input type="text" name="" id="stop" value="1">

    <input type="text" id="in" placeholder="请输入数字">

    <span id="span"></span>
    <p><input type="text" id="box1"/> <span style="display: none; ">focusout fire</span></p>
     <button type="submit" id="submit" >提交</button>

     <button id="hideorshow">点击隐藏或显示</button>
     <p style="display:none">1</p>
     <p style="display:none">2</p>
     <p style="display:none">3</p>
     <p style="display:none">4</p>
     <p style="display:none">5</p>
     <p style="display:none">6</p>
     <button id="slid">显示p标签</button>


     <div id="fade" style="width:200px;height:200px;background-color:blueviolet ;opacity:1"></div>
   <script>
        //ready 
        // $(document).ready(()=>{
        //   alert("加载完成")
        // })

        //on在选择元素上绑定一个或多个事件的事件处理函数。
    $("#btn1").on("click",function(){
         alert($(this).text());
    })
    //off去除一个事件
    $("xxx").off()//去除所有事件


    //bind 可以同时绑定多个事件 但是事件必须要空格
//     $('#foo').bind('mouseenter mouseleave', function() {
//   $(this).toggleClass('entered');
// });


//使用对象来设置多个事件
// $("button").bind({
//   click:function(){$("p").slideToggle();},
//   mouseover:function(){$("body").css("background-color","red");},  
//   mouseout:function(){$("body").css("background-color","#FFFFFF");}  
// });


//阻止冒泡
$("form").bind("submit", function() { return false; })

//或者这种方法
$("form").bind("submit", function(event){
  event.stopPropagation();
});
//取消默认行为
$("form").bind("submit", function(event){
  event.preventDefault();
});



//一次性的事件 one

//unbind 取消绑定的事件
$("p").unbind( "click" )



var foo = function () {
  // 处理某个事件的代码
};

//删除特定函数的绑定，将函数作为第二个参数传入
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 

$("p").unbind("click", foo); // ... 再也不会被触发 foo

//live事件 https://jquery.cuishifeng.cn/live.html

// $("#btn2").live("click",()=>{
//     alert("按钮2点击了")
// });
$("body").append(`<p>新加的p标签<p>`);



    //focus 
    $("input#stop").focus(function(){
  this.blur();//失去焦点
});   //无法使用input


//focusin
// $("#in").focusin(function(){
//    $(this).val("帅帅帅")
// })

//失去焦点时
//  $("#in").fadeOut(function(){
//      if ($(this).val()==null){
//         return $(this).addClass("show");
//      }
//  })

$("#box1").focusin(function() {
     $(this).next("span").css({"display":"inline"}).fadeIn(1000);
});
$("#box1").focusout(function() {
     $(this).next("span").css({"display":"none"}).fadeOut(1000);
});

//resize 当调整浏览器窗口的大小时，发生 resize 事件。
// $(window).resize(()=>{
//     alert("stop")
// })

// $(window).resize(function() {
//     let x=0;
//     $('#span').text(x+=1);
// });

//scroll当页面发生滚动的时候触发事件

$("#submit").click(function(evevt){
 
    alert("....");
})

//隐藏hide show显示
$("#submit").hide();
$("#submit").hide("slow");
$("#submit").show();


//显示之后还可以写一个函数
$("#submit").show(40000,function(){
   $(this).text("Animation Done...");
 });

 //toggle 对表格切换(显示/隐藏)
 $("#hideorshow").click(function(){
     let ishide=true;
     
     if(!ishide){
         $(this).show();
         ishide=false;
     }else{
         $(this).hide();
     }
 })

 //slidDown通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

//  $("#slid").click(()=>{
//      $("p").slideDown();
//     //  $("p").toggle("slow");
//  })
 //$("p").slideUp();向上滑动


//  slideToggle通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
$("#slid").click(()=>{
     $("p").slideToggle("fast"); //再次点击可以收回来
    
 })

 //fadeIn 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

// $("p").fadeTo("slow", 0.66)可以调节透明度
// $("#fade").fadeTo("slow",0.66)

//淡入淡出的效果
// $("#fade").fadeToggle("slow",0.3);

//设置动画 animate
// $("#fade").animate({
//     opacity:"1"
// },1000)

//stop停止当前动画

// 开始动画
$("#fade").click(function(){
  $(this).animate({width: "+=200px"}, 1000);
});

//finsh 停止当前队列中的所有动画
    </script>
</body>
</html>